<template>
  <div class="flex items-center bg-base-100 rounded shadow box-border p-4 border overflow-hidden">
    <span class="hidden sm:block rounded-full bg-base-200 p-2.5 text-gray-600">
      <slot></slot>
      <slot name="icon"></slot>
    </span>
    <div class="flex flex-col p-4">
      <span class="text-gray-500 whitespace-nowrap">{{ name }}</span>
      <span class="font-medium text-2xl">{{ value }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        required: true,
      },
      value: {
        type: String,
        required: true,
        default: "0",
      }
    }
  }
</script>
